<template>
  <div>
      <!-- 
        接口地址：https://api.xin88.top/youku/footer.json
        1.引入axios模块
        2.在methods选项中，制作一个 getDate 方法，绑定在按钮点击事件
        3.getData中书写axios请求，然后在后台查看数据
        4.data选项中，制作data属性，把请求到的数据保存到这里
        5.页面上用div 配合 v-if 判断data存在，在进行数据的使用
        6.利用div + v-for 完成数据的展示，添加css
       -->
      <button @click="getData">获取数据</button>

      <div v-if="data">
        <h3>关于我们</h3>
        <a v-for="x in data.footer.aboutUs.data" :key="x.id" :href="x.url">{{x.name}}</a>

        <h3>协议声明 </h3>
            <a v-for="x in data.footer.userAgreement.data"
            :key="x.id" :href="x.url">
            {{ x.name }}
            </a>

        <h3>服务合作 </h3>
          <a v-for="x in data.footer.newService.data"
          :href="x.url" :key="x.id">
          {{ x.name }}
          </a>
      </div>
  </div>
</template>

<script>
import axios from 'axios'
  export default {
    data() {
      return {
        data: null
      }
    },
    methods: {
      getData() {
        const url = 'https://api.xin88.top/youku/footer.json'
        axios.get(url).then(res=>{
            console.log(res);
            this.data = res.data
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
a{
  color: #333;
  text-decoration: none;
  margin: 4px;

}
</style>
